Estoy tratando de actualizar React.useState("") usando setDisplay en una función que toma una serie de cadenas y las une en una sola cadena antes de setDisplay.
Sin setDisplay, puedo usar console.log() y obtener la matriz unida.
const App = () => { const [display, setDisplay] = React.useState(""); const values = []; const onClick = (value) => { values.push(value); console.log(values) // w/o setDisplay output: ["1","2","3","4"]; w/ setDisplay output: ["1"]; ["2"]; ["3"]; ["4"]; setDisplay(values.join("")) }; return ( <div className="p-5"> {display} <NumPads data={keypress} onClick={onClick} /> <OperatorPads data={keypress} onClick={onClick} /> </div> ); };setDisplay((values) => ([...values, value].join("")]))
const onClick = (value) => setDisplay((dispay) => display.concat('', value));
La razón por la que console.log parece funcionar cuando no llama a setDisplay es simplemente porque el estado del componente no cambió.
Cuando llama a setDisplay , cambia el estado, por lo que todo el componente se vuelve a representar, lo que hace que los values se restablezcan a una matriz vacía.
Una forma de resolver esto ya se muestra en una respuesta anterior .
Otra forma es envolver su matriz de values con useRef :
const values = useRef([]); Luego acceda a la matriz usando values.current
Otra forma más es eliminar el uso de values todos juntos y cambiar la devolución de llamada a:
const onClick = (value) => { setDisplay(display + value); };